import { useState } from "react";
import styles from "./Index.module.css";
import { UserSetOutline } from "antd-mobile-icons";
import { Popup, Button } from "antd-mobile";

/**
 * 病人数据类型定义
 */
interface Patient {
  id: number;
  name: string;
  idCard: string;
}

/**
 * 选择就诊人组件
 * 功能：提供就诊人选择功能，支持切换和添加
 * 组件内部管理所有数据和状态，完全独立
 */
function PatientSelector() {
  // 病人数据数组 - 封装在组件内部
  const [patients] = useState<Patient[]>([
    {id: 1, name: '王小柯', idCard: '2015***19'},
    {id: 2, name: '李琳琳', idCard: '2015***10'},
  
  ]);

  const [visible, setVisible] = useState(false); // 弹窗显示状态
  const [currentPatient, setCurrentPatient] = useState<Patient>(patients[0]); // 当前选中病人，默认第一个

  /**
   * 处理病人选择
   * @param patient 选中的病人
   */
  const handlePatientSelect = (patient: Patient) => {
    setCurrentPatient(patient); // 更新内部状态
    setVisible(false); // 关闭弹窗
    console.log('切换到病人:', patient.name); // 内部处理切换逻辑
  };

  /**
   * 处理添加病人
   */
  const handleAddPatient = () => {
    setVisible(false); // 关闭弹窗
    console.log('添加就诊人'); // 内部处理添加逻辑
    // 这里可以添加新病人到列表或跳转到添加页面
  };

  return (
    <>
      {/* 当前选中病人显示区域 */}
      <div className={styles.patientDisplay}>
        <div className={styles.patientInfo}>
          <div className={styles.patientName}>
            {currentPatient.name}
            <span className={styles.patientIdCard}>{currentPatient.idCard}</span>
          </div>
        </div>

        {/* 切换按钮 */}
        <div className={styles.switchButton} onClick={() => setVisible(true)}>
          <UserSetOutline className={styles.switchIcon} />
          <span className={styles.switchText}>切换</span>
        </div>
      </div>

      {/* 选择病人弹窗 */}
      <Popup
        visible={visible}
        onMaskClick={() => setVisible(false)}
        bodyStyle={{
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          minHeight: "60vh",
        }}
      >
        <div className={styles.popupContent}>
          <h3 className={styles.popupTitle}>选择就诊人</h3>

          {/* 病人列表 */}
          <div className={styles.patientList}>
            {patients.map((patient) => (
              <div
                key={patient.id}
                className={`${styles.patientItem} ${
                  currentPatient.id === patient.id ? styles.selected : ""
                }`}
                onClick={() => handlePatientSelect(patient)}
              >
                <div className={styles.patientItemInfo}>
                  <span className={styles.patientItemName}>{patient.name}</span>
                  <span className={styles.patientItemIdCard}>{patient.idCard}</span>
                  {/* 选中标记 */}
                  {currentPatient.id === patient.id && (
                    <span className={styles.checkMark}>✓</span>
                  )}
                </div>
              </div>
            ))}
          </div>

          {/* 添加病人按钮 */}
          <div className={styles.addButtonContainer}>
            <Button
              block
              color="primary"
              size="large"
              className={styles.addButton}
              onClick={handleAddPatient}
            >
              添加就诊人
            </Button>
          </div>
        </div>
      </Popup>
    </>
  );
}

export default PatientSelector;
